$(function () {
    //1-页面加载后，在页面渲染第一屏用户数据

    var currentPage = 1;
    var pageSize = 5;
    render();
    //存储上传图片的数据
    var picArr = [];

    function render() {
        $.ajax({
            url: '/product/queryProductDetailList',
            data: {
                page: currentPage,
                pageSize: pageSize
            },
            dataType: 'json',
            success: function (info) {
                console.log(info.rows);
                //渲染数据
                $('tbody').html(template('tmp', info));
                //根据后台返回的总数 生成分页标签
                $('#paginator').bootstrapPaginator({
                    bootstrapMajorVersion: 3,
                    currentPage: currentPage, //当前页
                    totalPages: Math.ceil(info.total / info.size), //总页数
                    onPageClicked: function (_, _, _, page) {
                        currentPage = page;
                        render(); //渲染对应页面
                    }
                });
            }
        })
    }
    //2- 填充下拉列表数据
    $.ajax({
        url: '/category/querySecondCategoryPaging',
        //模拟获取全部一级分类数据
        data: {
            page: 1,
            pageSize: 1000
        },
        dataType: 'json',
        success: function (info) {
            console.log(info);
            //渲染列表
            $('.cate-list').html(template('tmp-cate', info));
        }
    });

    //使用事件委托 给ul下的每一个a动态绑定点击事件  点击时获取内容
    // 3-3-点击分类列表时，获取当前列表的内容设置给button按钮
    $('.cate-list').on('click', 'a', function () {
        //获取当前a标签id 和 文本 
        $('.cate-text').text($(this).text());
        //在隐藏域中存放用户当前选中的二级分类的id，后期用于传递给后台
        $('.brandId').val($(this).data('id'));
        //设置当前表单验证状态是通过的
        $("#form").data('bootstrapValidator').updateStatus('brandId', 'VALID');
    });

    //4-监听文件上传插件上传成功事件
    $('#file').fileupload({
        dataType: 'json',
        // 图片上传成功的回调
        // e 事件对象
        // data 会返回图片在服务器的信息
        done: function (e, data) {
            console.log(data);
            //获取服务器中保存图片地址
            var url = data.result.picAddr;
            //只要最近上传的三张图片的地址 和图片名称 
            //将图片添加到数组中
            picArr.unshift(data.result);
            //将本次上次完成的图片添加到图片列表中
            //append 向盒子内部后面添加  prepend向盒子内部的前面
            $('.img-list').prepend('<img src="' + url + '" width="80" alt="">');

            //如果picArr长度大于3，删除最后一个元素
            if (picArr.length > 3) {
                //删除最后一个元素
                //从图片列表中删除最后一个图片
                // $('.img-list img').eq( $('.img-list img').length-1 ).remove();
                //p:last-of-type 选中父元素中最后一个p标签，忽略其他类型元素 
                $('.img-list img:last-of-type').remove();
            }
            console.log(picArr);


            //当picArr的长度等于3时，设置表单状态验证通过
            if (picArr.length == 3) {
                $("#form").data('bootstrapValidator').updateStatus('brandLogo', 'VALID');
            }
        }
    })
    //5-做表单数据校验（数据不能为空）
    // 所有数据非空验证，
	// 库存必须是非0开头的数字
    // 尺码格式： xx-xx
    $('#form').bootstrapValidator({
        //1. 指定不校验的类型，默认为[':disabled', ':hidden', ':not(:visible)'],可以不设置
        excluded: [], //让隐藏的元素页被校验
        //2. 指定校验时的图标显示，默认是bootstrap风格
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        //验证字段
        fields: {
            brandId: {
                validators: {
                    notEmpty: {
                        message: '此数据不能为空'
                    }
                }
            },
            proName: {
                validators: {
                    notEmpty: {
                        message: '品牌名称不能为空'
                    }
                }
            },
            //商品描述
            proDesc: {
                validators: {
                    notEmpty: {
                        message: '此数据不能为空'
                    }
                }
            },
            // 库存
            num: {
                validators: {
                    notEmpty: {
                        message: '此数据不能为空'
                    },
                     //正则校验
                    // 数字 非0开头 
                    // [1-9] 匹配1-9数字
                    // * 任意此
                    // \d 数字
                    regexp: {
                        regexp: /^[1-9]\d*$/,
                        message: '库存必须是非0开头的数字'
                    }
                }
            },
            // 尺寸
            size: {
                validators: {
                    notEmpty: {
                        message: '此数据不能为空'
                    },
                      //20-60
                    regexp: {
                        regexp: /^\d{2}-\d{2}$/,
                        message: '尺码的格式必须是xx-xx格式 x是数字'
                    }
                }
              
            },
            // 原价
            oldPrice: {
                validators: {
                    notEmpty: {
                        message: '此数据不能为空'
                    }
                }
            },
            // 现价
            price: {
                validators: {
                    notEmpty: {
                        message: '此数据不能为空'
                    }
                }
            },
            //图片
            brandLogo:  {
                validators: {
                    notEmpty: {
                        message: '此数据不能为空'
                    }
                }
            }
        }
    });
    //6-6-表单验证成功，获取表单数据，提交服务器
    $('#form').on('success.form.bv', function (e) {
        //阻止submit的默认行为
        e.preventDefault();
        //获取表单数据，通过ajax提交给服务器
        var dataStr = $('#form').serialize();
        console.log(dataStr);
        //需要手动拼接 图片的数据 name=zs&age=18&sex=m
        dataStr += '&picName1=' + picArr[0].picName + '&picAddr1=' + picArr[0].picAddr;
        dataStr += '&picName2=' + picArr[1].picName + '&picAddr2=' + picArr[1].picAddr;
        dataStr += '&picName3=' + picArr[2].picName + '&picAddr3=' + picArr[2].picAddr;
        
        console.log(dataStr);
        //通过ajax将数据提交给服务器
        $.ajax({
            url: '/product/addProduct',
            type: 'post',
            data: dataStr,
            dataType: 'json',
            success: function (info) {
                console.log(info);
                // 1-关闭模态框
                $('#addModal').modal('hide');
                // 2-重新渲染第一页
                currentPage = 1;
                render();
                // 3-表单重置
                // 重置表单的内容 和 验证效果
                $('#form').data('bootstrapValidator').resetForm(true);
                // 手动重置 下拉列表 和 图片
                $('.cate-text').text('请选择二级分类');
                //重置图片列表 删除图片列表
                $('.img-list img').remove();
                picArr = [];
            }
        })
    })

})